/* 
  通用样式
*/

@charset "utf-8";
@import './reset.css';
@import './theme.less';

// margin-top  

.wh-1200 {
    width: 1200px;
    margin:  0 auto;
}

.auto {
    margin: auto;
}

.mt-5 {
    margin-top: 5px;
}
.mt-8 {
    margin-top: 8px;
}
.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}
.mt-16 {
    margin-top: 16px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-24{
    margin-top: 24px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-32{
    margin-top: 32px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-48{
    margin-top: 48px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-56 {
    margin-top: 56px;
}
.mt-60 {
    margin-top: 60px;
}
.mt-65 {
    margin-top: 65px;
}

// margin-bottom
.mb-5 {
    margin-bottom: 5px;
}
.mb-8 {
    margin-bottom: 8px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-16 {
    margin-bottom:16px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-24 {
    margin-bottom: 24px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-32 {
    margin-bottom: 32px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-48 {
    margin-bottom: 48px;
}
.mb-50 {
    margin-bottom: 50px;
}

.mb-56 {
    margin-bottom: 56px;
}
.mb-100 {
    margin-bottom: 100px;
}
// margin-left

.ml-5 {
    margin-left: 5px;
}
.ml-8 {
    margin-left: 8px;
}
.ml-10 {
    margin-left: 10px;
}
.ml-15 {
    margin-left: 15px;
}
.ml-16 {
    margin-left:16px;
}
.ml-20 {
    margin-left: 20px;
}
.ml-24 {
    margin-left: 24px;
}
.ml-30 {
    margin-left: 30px;
}
.ml-32 {
    margin-left: 32px;
}
.ml-40 {
    margin-left: 40px;
}
.ml-48 {
    margin-left: 48px;
}
.ml-50 {
    margin-left: 50px;
}



// margin-right

.mr-5 {
    margin-right: 5px;
}
.mr-8 {
    margin-right: 8px;
}
.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}
.mr-16 {
    margin-right: 16px;
}
.mr-20 {
    margin-right: 20px;
}
.mr-24 {
    margin-right: 24px;
}
.mr-30 {
    margin-right: 30px;
}
.mr-32 {
    margin-right: 32px;
}
.mr-40 {
    margin-right: 40px;
}
.mr-48 {
    margin-right: 48px;
}
.mr-50 {
    margin-right: 50px;
}

.mr-60 {
    margin-right: 60px;
}


//padding-left

.pl-5 {
    padding-left: 5px;
}
.pl-8 {
    padding-left: 8px;
}
.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}
.pl-16 {
    padding-left: 16px;
}
.pl-20 {
    padding-left: 20px;
}
.pl-24 {
    padding-left: 24px;
}
.pl-30 {
    padding-left: 30px;
}
.pl-32 {
    padding-left: 32px;
}
.pl-40 {
    padding-left: 40px;
}
.pl-48 {
    padding-left: 48px;
}
.pl-50 {
    padding-left: 50px;
}



//padding-right

.pr-5 {
    padding-right: 5px;
}
.pr-8 {
    padding-right: 8px;
}
.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}
.pr-16 {
    padding-right: 16px;
}
.pr-20 {
    padding-right: 20px;
}
.pr-24 {
    padding-right: 24px;
}
.pr-30 {
    padding-right: 30px;
}
.pr-32 {
    padding-right: 32px;
}
.pr-40 {
    padding-right: 40px;
}
.pr-48 {
    padding-right: 48px;
}
.pr-50 {
    padding-right: 50px;
}


//padding-top

.pt-5 {
    padding-top: 5px;
}
.pt-8 {
    padding-top: 8px;
}
.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}
.pt-16 {
    padding-top: 16px;
}
.pt-20 {
    padding-top: 20px;
}
.pt-24 {
    padding-top: 24px;
}
.pt-30 {
    padding-top: 30px;
}
.pt-32 {
    padding-top: 32px;
}
.pt-40 {
    padding-top: 40px;
}
.pt-48 {
    padding-top: 48px;
}
.pt-50 {
    padding-top: 50px;
}

//padding-bottom

.pb-5 {
    padding-bottom: 5px;
}
.pb-8 {
    padding-bottom: 8px;
}
.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}
.pb-16 {
    padding-bottom: 16px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pb-24 {
    padding-bottom: 24px;
}
.pb-30 {
    padding-bottom: 30px;
}
.pb-32 {
    padding-bottom: 32px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-48 {
    padding-bottom: 48px;
}
.pb-50 {
    padding-bottom: 50px;
}
.pb-100 {
    padding-bottom: 100px;
}
.tr {
    text-align: right;
}
.tc{
    text-align: center;
}
.tl {
    text-align: left;
}

// 清除浮动

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


//浮动

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.f-none {
    float: none;
}



// 弹性布局

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

// 文本超出  省略号替代
// 一行省略
.row-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行省略
.rows-ellipsis {
    -webkit-line-clamp: 3; // 用来限制在一个块元素显示的文本的行数
    display: -webkit-box; // 将对象作为弹性伸缩盒模型显示
    -webkit-box-orient: vertical; //设置或检查伸缩盒对象的子元素的排列方式
    text-overflow: ellipsis; // 在多行文本的情况下，用...隐藏超出范围的文本
    word-break: break-all;
    overflow: hidden;
}


